<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./js/bootstrap-table.min.js">
</head>
<body>
    <!-- 顶部导航 -->

<!-- 顶部导航 -->
<div class="container">
    <div class="row">
        <table class="table">

        </table>
    </div>
</div>


<div class="modal fade" id="modal-id">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title text-center " >添加文章</h4>
            </div>
            <div class="modal-body">
                
                <form action="#" method="POST" class="form-horizontal" role="form">
                      <div class="form-group">
                           <label for="title" class="col-sm-2 control-label" >标题</label>
           <div class="col-sm-10">
               <input type="text" class="form-control" id="title">
           </div>
                      </div>
                      <div class="form-group">
                        <label for="content" class="col-sm-2 control-label" >正文</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" id="content" cols="30" rows="5"></textarea>
                        </div>
                      </div>


                      <div class="form-group">
                        <label for="top" class="col-sm-2 control-label" >置顶</label>
                        <div class="col-sm-10">
                            <input type="checkbox" class="form-control" id="top" style="width: 34px; height: 34px;">
                           
                        </div>
                      </div>

                       
                </form>
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>


    <script src="./js/jquery.min.js"></script>
    <script src="./js/tableExport.min.js"></script>
    <script src="./js/jspdf.min.js"></script>
    <script src="./js/jspdf.plugin.autotable.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/bootstrap-table.min.js"></script>
    <script src="./js/bootstrap-table-print.min.js"></script>
   <script src="./js/bootstrap-table-export.min.js"></script>
    <script>
        $(function(){
          load();

          $(".table").on("click",".glyphicon-remove",function(){
            var id = $(this).parent().attr("data-id");
               if(confirm(`确定要删除${id}?`)){
             
              $.ajax({
                url:"http://localhost:3000/content",
                 type:"DELETE",
                 data:{_id:id},
                 success:function(res){
                     if(res.status===200){
                         
                         load();
                     }
                 }
              })
              }
          })

          $("#modal-id").on("click",".btn-primary",function(){
              var title = $(this).closest(".modal-content").find("#title").val();
              var content = $("#content").val();
              var top = $("#top").val()==="on";

              $.ajax({
                url:"http://localhost:3000/content",
                 type:"POST",
                 data:{title, content, top },
                 success:function(res){
                     console.log(res);
                     if(res.status===200){
                       
                         load();
                     }
                 }
              })
              
        
          })
        


            function load(){
                
             $.ajax({
                 url:"http://localhost:3000/content",
                 type:"GET",
                 success:function(res) {
                     if(res.status===200) {
                    $('.table').bootstrapTable('destroy').bootstrapTable({
                     data: res.data,
                     //url:"请求地址" 数据源

                     pagination:true, //启用大小
                     pageSize: 3,//分页大小
                    //pageList:[5,10,20], //分页大小

                    showToggle:true,//列表视图
                     showPaginationSwitch:true,//分页开关
                     showFullscreen:true,//全屏显示
                     //showRefresh:true,//刷新，仅支持URL数据源
                    search:true,//启用查询
                     showSearchButton:true,//显示按钮
                     clickToSelect:true,
                     showPrint:true,//打印
                     showExport:true,//下载打印
                      
                     //列
                      columns: [{
                          field:"state",
                          checkbox: true
                      },{
                        field: '_id',
                        title: '编号'
                    }, {
                         field: 'title',
                         title: '标题'
                    }, {
                        field: 'content',
                        title: '内容'
                    },
                    {
                        field: 'top',
                        title: '是否置顶',
                        formatter:function (value,data){
                            //value 当前列的值
                            //data 当前行的数据
                            return value?"是":"否";
                        }
                        

                        

                    }
                            ,{
                    title:"操作",
                    formatter:function (value,data) {
                    return ` <a href="#" data-id="${data._id}"><span class="glyphicon glyphicon-edit text-primary"></span></a>
                            <a href="#" data-id="${data._id}"><span class="glyphicon glyphicon-remove text-danger"></span></a>
                        `;
                    }
                }
            
                ],
                
                    //自定义按钮集合
                    buttons: function() {
                                    return {
                                        btnAdd: {
                                            icon: 'glyphicon glyphicon-plus',
                                            event: function () {
                                                //alert('添加')
                                                $("#modal-id").modal("show")
                                            },
                                            attributes: {
                                                title: "add",
                                                // "data-toggle":"modal",
                                                //  href:'#modal-id',
                                            }
                                        },
                                    
                                        btnDel: {
                                            icon: 'glyphicon glyphicon-remove',
                                            event: function () {
                                                //获取所有选中的行对应的绑定数据
                                                var ids = $(".table").bootstrapTable("getSelections");
                                                console.log(ids);
                                                $.ajax({
                                           url:"http://localhost:3000/content",
                                           type:"DELETE",
                                          //data:{_id:ids},
                                         data:{_id:{$in:ids}},
                                        success:function(res){
                                            console.log(res);
                                             if(res.status===200){
                                                 load();
                                                     }
                                                            }
                                                          })
                                                
                                            },
                                            attributes: {
                                                title: "remove"
                                            }
                                        }
                                    }
                                }
                            })
                        
                       

                     }
                 }
             })
            }
        })
       
    </script>
</body>
</html>